<template>
    <BaseCard :body-style="{ paddingTop: 0 }">
        <el-tabs v-model="activeType">
            <el-tab-pane v-for="item in userTypes" :label="item.label" :name="item.value"></el-tab-pane>
        </el-tabs>

        <div style="margin-bottom: var(--card-space);">
            <el-space>
                <UserAdd />
                <el-button>发送优惠券</el-button>
            </el-space>
        </div>

        <el-table :data="tableData.rows" @sort-change="onSortChange"
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e' }">
            <el-table-column type="expand">
                <template #default="scope">
                    <el-descriptions :column="4">
                        <el-descriptions-item label="首次访问">
                            {{ scope.row.register_time }}
                        </el-descriptions-item>

                        <el-descriptions-item label="近次访问">
                            {{ scope.row.last_login_time }}
                        </el-descriptions-item>

                        <el-descriptions-item label="身份证号">
                            {{ scope.row.IDNumber }}
                        </el-descriptions-item>
                        <el-descriptions-item label="真实姓名">
                            {{ scope.row.name }}
                        </el-descriptions-item>
                        <el-descriptions-item label="标签">
                            <!-- {{scope.row.tagIds.map(item => item.name).join('、')}} -->
                            <el-space>
                                <el-tag type="primary" v-for="item in scope.row.tagIds" :key="item._id">
                                    {{ item.name }}
                                </el-tag>
                            </el-space>
                        </el-descriptions-item>
                        <el-descriptions-item label="生日">
                            {{ scope.row.birth }}
                        </el-descriptions-item>

                        <el-descriptions-item label="推荐人">
                            无
                        </el-descriptions-item>
                        <el-descriptions-item label="地址">
                            {{ scope.row.address }}
                        </el-descriptions-item>
                        <el-descriptions-item label="备注">
                            {{ scope.row.remark }}
                        </el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column type="selection" width="55" />
            <el-table-column label="头像">
                <template #default="scope">
                    <el-image :src="scope.row.avatar" style="width: 30px;height: 30px;"></el-image>
                </template>
            </el-table-column>

            <el-table-column label="姓名" prop="name" />
            <el-table-column label="付费会员">
                <template #default="scope">
                    {{ scope.row.vip ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column label="用户等级" prop="gradeId.name" />
            <el-table-column label="分组" prop="groupId.name" />
            <el-table-column label="手机号">
                <template #default="scope">
                    {{ scope.row.phone ? scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7) : '' }}
                </template>
            </el-table-column>
            <el-table-column label="用户类型" prop="type" />
            <el-table-column label="余额" sortable="custom">
                <template #default="scope">
                    {{ scope.row.balance.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-space>
                        <a href="#" class="link">详情</a>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                更多
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item
                                        :command="{ _id: scope.row._id, action: 'update' }">编辑等级</el-dropdown-item>
                                    <el-dropdown-item
                                        :command="{ _id: scope.row._id, action: 'delete' }">删除等级</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[5, 10, 20, 40, 100]" background :total="tableData.total"
                layout="total, sizes, prev, pager, next, jumper" />
        </div>
    </BaseCard>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import UserAdd from './UserAdd.vue';
const userTypes = [
    { value: '', label: '全部' },
    { value: '微信小程序', label: '微信小程序' },
    { value: '微信公众号', label: '微信公众号' },
    { value: 'H5', label: 'H5' },
    { value: 'PC', label: 'PC' },
    { value: 'APP', label: 'APP' },
];
defineProps(['tableData']);
const pageData = defineModel<any>('pageData');
const activeType = defineModel<any>('activeType');
const emit = defineEmits(['onSortChange']);

function onSortChange(data: { order: any }) {
    emit('onSortChange', data);
}

</script>

<style scoped>
.el-descriptions {
    padding-left: 60px;
}
</style>

<style>
.el-tabs__nav-wrap:after {
    height: 1px;
}
</style>